<template>
  <el-card class="box-card">
    <h2 class="title">商品分类信息</h2>
    <el-form
      ref="productTypeFormRef"
      :rules="rules"
      :model="productTypeForm"
      label-width="80px"
    >
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-input type="hidden" v-model="productTypeForm.id"></el-input>
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="productTypeForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="父级分类" prop="pid">
            <el-select
              v-model="productTypeForm.pid"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in productTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="handleType !== 'view'">
        <el-col :span="colSize" :offset="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提 交</el-button>
            <el-button @click="onCancel">取 消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="handleType === 'view'">
        <el-col :span="colSize" :offset="9">
          <el-form-item>
            <el-button type="primary" @click="onCancel">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { api_parentTypeList } from '../../api/productCate'
import { api_saveProductType } from '../../api/productCate'
import { api_productTypeInfo } from '../../api/productCate'
export default {
  data() {
    return {
      handleType: 'add',
      colSize: 18,
      offsetSize: 3,
      productTypeForm: {
        id: null,
        name: null,
        pid: null,
      },
      rules: {
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        pid: [{ required: true, message: '请选择父级分类', trigger: 'blur' }],
      },
      productTypeList: [
        {
          id: 0,
          name: '无',
        },
      ],
    }
  },
  created() {
    this.handleParentTypeList()
    this.getHandleType()
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let id = this.$route.query.id
      if (id) {
        const { data: res } = await api_productTypeInfo({
          id: id,
        })
        this.productTypeForm = res.data
      }
    },
    getHandleType() {
      this.handleType = this.$route.query.handleType
    },
    async handleParentTypeList() {
      const { data: res } = await api_parentTypeList()
      this.productTypeList = this.productTypeList.concat(res.data)
    },
    onSubmit() {
      this.$refs.productTypeFormRef.validate(async (valid) => {
        if (!valid) {
          return false
        }
        const { data: res } = await api_saveProductType(this.productTypeForm)
        if (!res.success) {
          this.$message.error(res.msg)
          return
        }
        this.$message({
          message: res.msg,
          type: 'success',
        })
        await this.$router.push('/product/productTypeList')
      })
    },
    onCancel() {
      this.$router.push('/product/productTypeList')
    },
  },
}
</script>

<style scoped>
.box-card {
  width: 60%;
  margin: auto;
}
.title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 40px;
}
</style>
